<template>
	<view class="content">
		<view class="list_box">
			<view class="list_item" @click="goSafe">
				<view class="list_left">账号安全</view>
				<image class="list_r" src="../../static/image/grzx_ico_jr_hui@2x.png" mode=""></image>
			</view>
			<view class="list_item" @click="showModal" data-target="Modal">
				<view class="list_left">清除缓存</view>
				<image class="list_r" src="../../static/image/grzx_ico_jr_hui@2x.png" mode=""></image>
			</view>
			<view class="list_item">
				<view class="list_left">检查更新</view>
				<view class="list_right">v1.0.1</view>
			</view>
		</view>
		<view class="btn" @click="Loginout">退出登录</view>
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu_title">
					<view></view>
					<view class="text-bold cu-item-title1">清除缓存</view>
					<view class="action1" @click="hideModal">
						<image src="../../static/image/ico_ts_gb@2x.png" mode=""></image>
					</view>
				</view>
				<view class="padding_xl">
					<view class="cu_tip">确认清除APP浏览缓存？</view>
				</view>
				<view class="button">
					<view class="cu_btn" @click="CleanApp">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:1,
				modalName:null,
			}
		},
		onLoad() {

		},
		methods: {
			goSafe(){
				uni.navigateTo({
					url:'Safe'
				})
			},
			clearStorages(){
				this.dialogVisible=!this.dialogVisible
				uni.clearStorage();
				// this.$Socket.nclose();
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			//退出
			Loginout(){
				uni.removeStorageSync('token')
				uni.removeStorageSync('uid');
				uni.removeStorageSync('userinfo');
				uni.navigateTo({
					url:'../login/login'
				})
			},
			CleanApp(){
				uni.clearStorage()
				// plus.cache.clear( function () {
				//     uni.showToast({
				//         title:'清除成功',
				// 		icon:'none',
				// 		success() {
				// 		}
				// 	})
				// });	
				this.hideModal()
				uni.redirectTo({
					url:'../login/login'
				})
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: #F5F5F5;
	}
	.list_box{
		width: 100%;
		height: auto;
		margin-top: 20rpx;
	}
	.list_item{
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid #F5F5F5;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}
	.list_kg{
		width: 56rpx;
		height: 26rpx;
	}
	.list_r{
		width: 12rpx;
		height: 22rpx;
	}
	.list_right{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.btn{
		width: 690rpx;
		height: 88rpx;
		background: #FFDD47;
		border-radius: 10rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 80rpx;
	}
	/* 弹窗 */
	.cu-dialog{
		width:570rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 10rpx;
	}
	.cu-item-title{
		font-size: 32rpx;
	}
	
	.cu-item-title1{
		width: 100%;
		font-size: 32rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.action1 image{
		width: 29rpx;
		height: 29rpx;
	
	}
	
	.cu_title{
		width:100%;
		height:80rpx;
		padding: 0rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #F5F5F5;
		
	}
	.button{
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cu_btn{
		width: 250rpx;
		height: 60rpx;
		background: #FFDD47;
		border-radius: 6rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.padding_xl{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}
	.cu_start_box{
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cu_start_box image{
		width: 39rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}
	.cu_close{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		bottom: 25%;
		right: 45%;
	}
	.cu_tip{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
	
	.cu-dialog {
	    position: relative;
	    display: inline-block;
	    vertical-align: middle;
	    margin-left: auto;
	    margin-right: auto;
	    max-width: 100%;
	    background-color: #f8f8f8;
	    border-radius: 5px;
	    overflow: hidden;
	}

</style>
